<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom title="我的粉丝" :isAppBtn="false" :isHome="false"></HeadCustom>
		<SearchInput :isBtn="false" placeholder="搜索" :keywords.sync="keywords" @del="getInit()" @input="getInit()" />
		<view class="count">共关注 <text class="mark">{{userPage.total}}</text> 个</view>
		<view class="list-box">
			<view class="user-item fboxRow Ycenter" v-for="(item, index) in userList" :key="index">
				<image class="avatar" :src="item.avatar" mode="aspectFill" @tap="goPage(item)"></image>
				<view class="fboxCol flex1" @tap="goPage(item)">
					<view class="fboxRow Ycenter flex1">
						<text class="font32 name lh44 font-ell1">{{item.realName}}</text>
						<text v-if="item.isAuth" class="bwfont bw-a-zu5297"></text>
					</view>
					<view class="info lh40 mt10">
						<text style="margin-right: 24rpx;">{{item.positionName}}</text> {{item.companyName}}
					</view>
				</view>
				<view v-if="item.isAttention" class="btn font28 bg-gray fboxRow Ycenter Xcenter" @tap="attention(item, index)">已关注</view>
				<view v-else class="btn font28 bg-linear fboxRow Ycenter Xcenter" @tap="attention(item, index)">关注</view>
			</view>
			<u-loadmore fontSize="24rpx" :status="userPage.loading" />
		</view>
	</view>
</template>

<script>
import { memberAttention, memberAddAttention, memberCancelAttention } from '@/api/mine.js';
import SearchInput from '@/components/search/index.vue'
export default {
	components:{
		SearchInput
	},
	data() {
		return {
			theme: getApp().globalData.appTheme,
			globalColor: getApp().globalData.globalColor,
			keywords: '',
			userList: [],
			userPage:{
				current: 1,
				size: 20,
				total: 0,
				loading: 'loading',
			},
		};
	},
	onLoad(option) {
		this.getInit();
	},
	onReachBottom() {
		if (this.userPage.size * this.userPage.current < this.userPage.total) {
			this.userPage.loading = 'loading';
			this.userPage.current ++
			this.getList();
		} else {
			this.userPage.loading = 'nomore';
		}
	},
	onPullDownRefresh() {
		this.page.size = 20;
		this.getInit();
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	methods: {
		// 跳转到详情
		goPage(item) {
			this.$pageTo('/CardDetail', { id: item.memberId });
		},
		// 操作关注
		attention(item, index){
			if(item.isAttention){
				// 取消关注
				memberCancelAttention({
					memberIdList: [item.memberId]
				}).then(res=>{
					if(res.data){
						this.userList[index].isAttention = false
						uni.showToast({
							icon: 'none',
							title: '已取消关注'
						})
					}
				})
			}else{
				// 关注
				memberAddAttention({
					othersId: item.memberId
				}).then(res=>{
					if(res.data){
						this.userList[index].isAttention = true
						uni.showToast({
							icon: 'none',
							title: '关注成功'
						})
					}
				})
			}
		},
		// 初始化
		getInit() {
			this.userList = []
			this.userPage = {
				current: 1,
				size: 20,
				total: 0,
				loading: 'loading',
			}
			this.getList();
		},
		// 分页查询列表
		getList() {
			memberAttention({ current: this.userPage.current , size: this.userPage.size, type: 1 , realName: this.keywords}).then(res => {
				if (res.data) {
					this.userList = this.userList.concat(res.data.list);
					this.userPage.total = res.data.total;
					const {total, current, size} = res.data
					if (total < current * size) {
						this.userPage.loading = 'nomore';
					}
				}
			});
		},
	}
};
</script>

<style scoped lang="scss">
	.page-wrap{min-height: calc(100vh);background-color: var(--viewBgColor);}
	.count{padding: 20rpx 40rpx 0;line-height: 40rpx;color: var(--contentFontDarkColor);}
	.count .mark{color: var(--contourButtonTextColor);}
	.list-box{padding: 0 40rpx 40rpx;}
	.user-item{padding: 38rpx 0;border-bottom: 1rpx solid #F4F5F9;}
	.user-item .avatar{ margin-right: 22rpx; width: 88rpx;height: 88rpx;border-radius: 12rpx}
	.user-item .bwfont{ margin-left: 6rpx; background: linear-gradient(360deg, #C49875 6%, #EDB384 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
	.info{ height: 40rpx;overflow: hidden; color: var(--contentFontLightColor);}
	.btn{width: 120rpx;height: 56rpx;border-radius: 8rpx}
	.bg-gray{background: #E8EDF1;color:#686870 ;}
</style>
